<template>
    <div class="schedule-container">
        <a-card class="schedule-card" title="规培麻醉医师轮转安排计划表">
            <div class="table-container">
                <a-table 
                    :dataSource="anesthesiaRotations" 
                    :columns="anesthesiaColumns" 
                    :pagination="false"
                    :rowClassName="(record, index) => (index % 2 === 0 ? 'table-row-light' : 'table-row-dark')"
                    bordered
                />
            </div>
        </a-card> 
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import dayjs from 'dayjs';
import {studentScheduleApi} from '../../api/schedule/schedule-api';
import {encryptData} from "/@/lib/encrypt.js";
// 假设有useUserStore或从localStorage获取用户信息
// import { useUserStore } from '/@/store';
// const userStore = useUserStore();
// const userId = userStore.userId;
const userId = localStorage.getItem('userId'); // 示例：从localStorage获取

const anesthesiaRotations = ref([]);

const fetchUserSchedule = async () => {
  const res = await studentScheduleApi.queryPage({encryptData:encryptData({ userId, pageNum: 1, pageSize: 50 })});
  anesthesiaRotations.value = res.data.list;
};

onMounted(() => {
  fetchUserSchedule();
});
onMounted(() => {
    calculateRotationDates();
});

const calculateRotationDates = () => {
    let currentDate = dayjs();
    
    anesthesiaRotations.value = anesthesiaRotations.value.map(rotation => {
        const startDate = currentDate.format('YYYY-MM-DD');
        currentDate = currentDate.add(rotation.months, 'month');
        const endDate = currentDate.subtract(1, 'day').format('YYYY-MM-DD');
        
        return {
            ...rotation,
            startDate,
            endDate
        };
    });
};

const anesthesiaColumns = [
    {
        title: '亚专业',
        dataIndex: 'deptName',
        key: 'deptName',
        width: '40%',
        align: 'left'
    },
    {
        title: '月数',
        dataIndex: 'months',
        key: 'months',
        width: '15%',
        align: 'center'
    },
    {
        title: '开始时间',
        dataIndex: 'startTime',
        key: 'startTime',
        width: '22%',
        align: 'center'
    },
    {
        title: '结束时间',
        dataIndex: 'endTime',
        key: 'endTime',
        width: '22%',
        align: 'center'
    }
];
</script>

<style scoped>
.schedule-container {
    /* padding: 6px; */
    background: #f0f2f5;
    min-height: 100vh;
}

.schedule-card {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.schedule-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.table-container {
    margin-top: 6px;
}

:deep(.ant-card) {
    background: #fff;
}

:deep(.ant-card-head) {
    border-bottom: 2px solid #2f54eb;
    padding: 16px 24px;
}

:deep(.ant-card-head-title) {
    font-weight: 600;
    font-size: 18px;
    color: #2f54eb;
}

:deep(.ant-table) {
    background: #fff;
    border-radius: 8px;
}

:deep(.ant-table-thead > tr > th) {
    background: #f0f5ff;
    color: #2f54eb;
    font-weight: 600;
    padding: 16px;
    border-bottom: 2px solid #d9e3ff;
}

:deep(.table-row-light) {
    background: #fff;
}

:deep(.table-row-dark) {
    background: #f8faff;
}

:deep(.ant-table-tbody > tr > td) {
    padding: 16px;
    transition: all 0.3s;
}

:deep(.ant-table-tbody > tr:hover > td) {
    background: #e6f7ff !important;
}

/* 响应式优化 */
@media screen and (max-width: 768px) {
    .schedule-container {
        padding: 12px;
    }
    
    :deep(.ant-card-head-title) {
        font-size: 16px;
    }
    
    :deep(.ant-table-thead > tr > th),
    :deep(.ant-table-tbody > tr > td) {
        padding: 12px 8px;
        font-size: 14px;
    }
}
</style>
